import React, { Component } from "react";
import "./index.css";
import propTypes from "prop-types";

import { nanoid } from "nanoid";
export default class Header extends Component {
  static propTypes = {
  add: propTypes.func.isRequired,
  
  };

  handlekeyup = (event) => {
    console.log(event.target.value);
    if (event.keyCode !== 13) return;
    if (!event.target.value.trim()) return alert("输入不能为空");
    //准备好一个对象
    const todoObj = { id: nanoid(), title: event.target.value, done: false };
    this.props.add(todoObj);
    event.target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input
          onKeyUp={this.handlekeyup}
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
